<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="最爱古风小雷丘">
    <title></title>
    <style>
        body{
            margin: 0;
        }
        .box{
            width: 520px;
            height: 280px;
            margin: 100px auto; 
        }
      ul{
          margin: 0;
          padding: 0;
          list-style: none;
          position: relative;
      }
      li{
          position: absolute;
          display: none;
      }
      .first{
          display: block;
      }
      .a{
          width: 150px;
          height: 22px;
          position: absolute;
          border: 1px solid transparent;
          background-color: #C3D6E3;
          border-radius: 10px;
          top: 230px;
          display: flex;
          left:calc(50% - 75px);
      }
      .radio{
          width: 13px;
          height: 13px;
          border: 1px solid white;
          border-radius: 50px;
          margin-left: 12px;
          margin-top: 3px;
          background-color: white;  
      }
      .ra{
          background-color: red;
          border: 1px solid red;
      }
        
#prev,
#next{
    position: absolute;
     width: 30px;
    height: 50px;
    background:white;
    color: red; 
    /* z-index: 10; */
     opacity: 0.7; 
    /*calc是计算的意思*/
     top:120px;  
     font-weight: bold;
     text-align: center; 
    line-height: 50px;
    cursor: pointer;
    display: none;    
}
#prev{
       left:20px;
       border-top-left-radius: 5px;
       border-bottom-left-radius: 5px;
}
#next{
       right: 20px;
       border-top-right-radius: 5px;
       border-bottom-right-radius: 5px;
}
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="first"><a href="#"><img src="img/01.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/02.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/03.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/04.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/05.jpg" alt=""></a></li>
            <div class="a">
                 <div class="radio ra"></div>
                 <div class="radio"></div>
                 <div class="radio"></div>
                 <div class="radio"></div>
                 <div class="radio"></div>
            </div>  
                <span id="prev">&lt;</span>
                <span id="next">&gt;</span>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
        </ul>
    </div>
</body>
</html>
<script>
    
    var lis = document.querySelectorAll('li');
    var radios = document.querySelectorAll('.radio');
    var prev = document.querySelector('#prev');
    var next = document.querySelector('#next');
    var ul = document.querySelector('ul');
   
   
     
    // for(var i = 0;i < radios.length;i++){
    //       radios[i].index = i;
    //     //   lis[i].style.display = 'none';
    //     radios[i].onmouseenter= function(){
    //          radios[this.index].className = 'radio ra';
    //          clearInterval(timer);
    //     }
    //     radios[i].onmouseleave= function(){
    //          radios[this.index].className = 'radio';
    //          var timer = setInterval(changeImage,1000);
    //     }
    // }
 
       ul.onmouseover = function(){
           prev.style.display = 'block';
           next.style.display = 'block';
           clearInterval(timer);
       }
       


       ul.onmouseout = function(){
           prev.style.display = 'none';
           next.style.display = 'none';
        setInterval(changeImage,1000);
       }
      
   
       var timer = setInterval(changeImage,1000);
     // 初始 显示索引为0 第一张
    var index = 0;  //记录当前显示图片的索引值
    function changeImage(){
                 
                
        // 想让所有的图片隐藏，去除类名
        for(var i = 0;i < lis.length;i++){
             lis[i].className = '';
             radios[i].className = 'radio';
        }
        
        // 让记录显示图片的索引值 加1
        index ++ ;
        if(index == 5){
            // 当循环到最后一张的时候，从第一张开始
            index = 0;
        }
        console.log(index);
        // 根据索引值显示对应的图片
        lis[index].className = 'first';
        radios[index].className = 'radio ra';
     
    
    }
    
    

     
    
</script>